{extend name="layout/layout" /}


{block name="style"}
	<style>

		.withdraw{
			margin-bottom: 50px;
		}

		.mui-btn-theme{
			border-radius: 0;
			position: fixed;
			left: 0;
			bottom: 0;
			width:100%;
		}

		.info{
			padding-left: 20px;
		}
		
		.del-btn{
			border-color: #e60012;
			color: #e60012;
			padding: 3px 5px;
			font-size: 12px;
		}

		.mui-table-view-cell{
			border-bottom: 1px solid #ccc;
		}

		.mui-card{
			margin: 10px 0;
		}

		.mui-card-content{
			padding: 10px;
		}
	</style>
{/block}

{block name="main"}
	<div class="withdraw" id="withdraw" v-cloak>
		<div class="box">
			<div class="">
				
				<div class="list" v-if="list.length > 0">
					<div class="mui-card" v-for="item, index in list">
						<!--页眉，放置标题-->
						<div class="mui-card-header">
							<div class="mui-col-xs-12">
								<div class="mui-pull-left">{{item.create_time}}</div>
								<div class="mui-pull-right"><b class="text-theme">{{item.status_text}}</b></div>
							</div>
						</div>
						<!--内容区-->
						<div class="mui-card-content">
							<p>提现金额：{{item.amount}}</p>
							<p>手续费：{{item.fees}}</p>
							<p>帐号类型：{{item.account_type}}</p>
							<p>收款人：{{item.account_name}}</p>
							<p>收款帐号: {{item.account_no}}</p>

							<p v-if="item.handle_time">处理时间：{{item.handle_time}}</p>
							<p v-if="item.remark">备注：{{item.remark}}</p>
						</div>
					</div>
				</div>
				<div v-else class="no-data">没有相关记录</div>
			</div>
		</div>

		<a href="{:url('funds/withdraw')}" class="mui-btn mui-btn-block mui-btn-theme">申请提现</a>
	</div>
{/block}
{block name="navbar"}{/block}
{block name="script"}
	<script>
		mui.init({
		  pullRefresh : {
		    container:"#withdraw",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		    down : {
		      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
		      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
		      height:'50px',//可选,默认50px.下拉刷新控件的高度,
		      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
		      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
		      auto: false,//可选,默认false.首次加载自动上拉刷新一次
		      callback :function(){
		      	console.log('down');
		      	myVue.goodsList = [];
		      	myVue.page = 1;
		      	myVue.nextPage = false;
		      	// mui('#pullup-container').pullRefresh().refresh(true);

		      	myVue.getDetail();
		      	// mui('.group-goods').pullRefresh().endPulldown();
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    },
		    up : {
		      height:50,//可选.默认50.触发上拉加载拖动距离
		      auto:true,//可选,默认false.自动上拉加载一次
		      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
		      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
		      callback :function(){
		      	myVue.getDetail();
		      	this.endPullupToRefresh(myVue.nextPage);
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    }
		  }
		});

		var myVue = new Vue({
			el:'.withdraw',
			data:{
				list:[],
				page: 1,
				nextPage: false,
			},
			mounted: function(){
				if(token){
					this.token = token;
					console.log(this.token);
					this.getDetail();
				} else {
					this.login();
				}

			},
			methods: {
				getDetail: function(){
					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url =  'funds/withdrawRecord';
					var that = this;

					request(that, {'url':url, 'data':{page: that.page}} ,function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.list = that.list.concat(res.data);
							that.page ++;
							if(res.data.length < 20) {
								that.nextPage = true;
							}
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				login:function(){
					location.href = '/mobile/user/login';
				},
				//删除
				del: function(item, index){
					var that = this;
					mui.confirm('确认删除该提现帐号吗？', '提示', ['取消', '确认'], function(e) {
	                    if (e.index == 1) {
							var url =  'funds/delAccount';
							layer.open({
								type:2,
								shadeClose: false,
							});
							request(that, {'url': url, 'data': {
							  	"id": item.id,
							}}, function(res){
								layer.closeAll();
								if(res.code == 200) {
									that.list.splice(index,1);
								}	
								mui.toast(res.msg);
							});
						}
					});
				},
			}
		});
	</script>
{/block}